<template>
	<div class="body">
		<view class="v1">
			<form @submit="formSubmit">
				<span><i>收货人:</i><input type="text" placeholder="请填写收货人" v-model="name" ></span>
				<span><i>性别:</i><radio-group name="radio-group" v-model="sex">
						<label><radio value="1" />男</label>
						<label><radio value="2" />女</label>
				    </radio-group></span>
				<span><i>联系方式:</i><input type="text" placeholder="请输入手机号" v-model="phone"></span>
				<span><i>所在地址:</i><input type="text" placeholder="请点击进行选择" v-model="region"></span>
				<span><i>详细地址:</i><input type="text" placeholder="例1号楼1单元101" v-model="addr"></span>
				<span><i>是否默认:</i>
				<checkbox-group v-model="isDefault" @change="checkboxChange">
					<checkbox value="1">是</checkbox> 
				</checkbox-group>
				</span>
				<view class="v2">
					<button formType="submit">保存</button>
				</view>
			</form>
		</view>
		
	</div>
</template>

<script>
	export default{
	   //数据
	   data(){
		   return{
			   addr:'',
			   isDefault:'',
			   name:'',
			   phone:'',
			   region:'',
			   userId:'12321312312313',
			   sex:'1',
			   
		   }
		  
	   },
	   
	   methods:{
		    formSubmit(e) {
				console.log(e)
		    	uni.request({
		    		url: 'https://www.zunyishengshui.com/maishui/address/indexAddress', 
		    		method:'POST',
		    		data: {
		    			addr:this.addr,
		    			isDefault:this.isDefault,
		    			name:this.name,
		    			phone:this.phone,
		    			region:this.region,
		    			userId:'12321312312313',
		    			sex:this.sex,
		    		},
		    		header:{
		    			'Content-Type': 'application/x-www-form-urlencoded', 
		    		},
		    		success: (res) => {
		    			console.log(res);
		    			this.address = res.data.data;
		    			this.text = 'request success';
		    		},
		    	})
		    },
			 checkboxChange: function (e) {
				 
                if(e.detail.value.length > 0){
			      	this.isDefault = 1;
				}else{
			     	this.isDefault = 0;
				}				 
			 }
		   	
		   
	   }
	  
	       	
	       
	        
	   
		
		
		
		
		
		
		
		
		

	}
</script>

<style>
	.body{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: rgba(240, 240, 240, 1);
		
	}
	.v1{
		left: 0px;
		margin-top: 20upx;
		width: 750upx;
		height: 440upx;
		line-height: 40upx;
		text-align: center;
		background-color: #fff;

	}
	.v1 form span{
		display: flex;
		float: left;
	}
	.v1 form span i{
		margin-left: 66upx;
		margin-top: 30upx;
		width: 172upx;
		height: 40upx;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.v1 form span input{
		margin-left: 66upx;
		margin-top: 30upx;
		width: 90%;
		height: 40upx;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	..v1 form span checkbox-group{
		margin-left: 66upx;
		margin-top: 30upx;
		width: 90%;
		height: 40upx;
		color: rgba(153, 153, 153, 1);
	}
	.v1 form span checkbox-group checkbox{
		margin-left: 66upx;
		margin-top: 30upx;
		width: 90%;
		height: 40upx;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: left;
	}
	.v1 form span radio-group{
		margin-left: 66upx;
		margin-top: 24upx;
		width: 368upx;
		height: 40upx;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.v1 form span{
		/* line-height: 40px; */
		width: 100%;
		border-bottom:2upx solid rgba(238, 238, 238, 1);
	}
	.v2{
		position: relative;
	}
	.v2 button{
		margin-left: 36upx;
		margin-top: 374upx;
		width: 680upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 4px;
		background-color: rgba(59, 156, 219, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Microsoft Yahei;
        position: absolute;
		top: 200upx;
		left: 5upx;
	}
</style>
